<!DOCTYPE html><html lang="ja">
<head>
<meta charset="utf-8" />
<title>msgpack ajax demo</title>
<style>
/*
body {
    overflow: hidden;
}
 */
.box {
    position: absolute; top: 50%; left: 50%; background: lightpink;
    width: 100px; height: 100px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
}
</style>
<script src="../msgpack.js"></script>
<script src="uupaa.js"></script>
<script>

// --- set WebWorker script url ---
msgpack.worker = "../" + msgpack.worker;

var downloadURLs = ["1mb.php", "48byte.php", "1byte.php", "last.php"],
    uploadURL = "upload.php",
    lastData = null;

// msgpack.download + msgpack.unpack
function download(url, useWorker) {

    var perf = +new Date;
    uu.log("downloading...");

    function callback(data, option, response) {
        if (response.ok) {
            uu.log("download elapse @ms", (+new Date) - perf);
            if (uu.id("show").checked) {
                uu.log("--- msgpack.unpack() ---");
                uu.log(data);
            }
            lastData = data;
        } else {
            uu.log("error status = @", response.status);
        }
    }

    msgpack.download(downloadURLs[url] + "?" + (+new Date), { worker: useWorker }, callback);
}

// msgpack.pack + msgpack.upload
function upload(useWorker) {

    var perf = +new Date;
    uu.log("uploading...");

    function callback(data, option, response) {
        if (response.ok) {
            uu.log("upload elapse @ms", (+new Date) - perf);
            if (uu.id("show").checked) {
                uu.log("--- xhr.responseText ---");
                uu.log(data);
            }
        } else {
            uu.log("error status = @", response.status);
        }
    }
    var data = lastData ? lastData : "";

    msgpack.upload(uploadURL, { data: data, worker: useWorker }, callback);
}

// flier
uu.ready("window", function() {
    var viewport = uu.viewport, // { innerWidth, innerHeight }
        iw = viewport.innerWidth,
        ih = viewport.innerHeight;

    function rand() {
        var rv = { x: [iw / 2, "outback"],
                   y: [ih / 2, "outback"], chain: 1 };

        switch ((Math.random() * 10 % 4) | 0) {
        case 0: rv.x =  Math.random() * (iw - 100 - 30) + 30; break;
        case 1: rv.x = [Math.random() * (iw - 100 - 30) + 30, "outback"]; break;
        case 2: rv.y =  Math.random() * (ih - 100 - 30) + 30; break;
        case 3: rv.y = [Math.random() * (ih - 100 - 30) + 30, "outback"]; break;
        }
        return rv;
    }

    function motion(node, duration) {
        uu.fx(node, duration, { x: [iw - 200, "outback"], y: 30, o: 0.5, chain: 1 });
        uu.fx(node, duration, { y: [ih - 200, "outback"], o: 1, chain: 1 });
        uu.fx(node, duration, { x: [30, "outback"], o: 0.5, chain: 1 });
        uu.fx(node, duration, rand());
        uu.fx(node, duration, rand());
        uu.fx(node, duration, { x: [iw / 2, "outback"],
                                y: [ih / 2, "outback"],
                                reverse: 1,
                                after: function(node) { motion(node, duration); }});
    }
    motion(uu.klass("box")[0], 1000);
});

</script>
</head><body>
<h1>msgpack.download(), msgpack.upload()</h1>
<div class="box"></div>
<div>
    Last downloaded data length: <span id="lastlength">0</span> bytes
</div>
<div>
    <input id="show" type="checkbox" value="1" />add decode log
    <input type="button" value="clear log" onclick="uu.log.clear()" />
</div>


<hr />
<table>
<caption>Test1 (without WebWorkers)</caption>
<tr>
    <td>Choose Download data</td>
    <td></td>
    <td>Upload Last data</td>
    <td></td>
    <td>Download Last data</td>
</tr>
<tr>
    <td>
        <input type="button" value="1MB data x 3" onclick="download(0, 0);download(0, 0);download(0, 0)" />
        <input type="button" value="1MB data" onclick="download(0)" />
        <input type="button" value="48byte data" onclick="download(1)" />
        <input type="button" value="1byte data" onclick="download(2)" />
    </td>
    <td> -&gt; </td>
    <td>
        <input type="button" value="pack + upload" onclick="upload(0)" />
    </td>
    <td> -&gt; </td>
    <td>
        <input type="button" value="download + unpack" onclick="download(3)" />
    </td>
</tr>
</table>


<hr />
<table>
<caption>Test2 (with WebWorkers)</caption>
<tr>
    <td>Choose Download data</td>
    <td></td>
    <td>Upload Last data</td>
    <td></td>
    <td>Download Last data</td>
</tr>
<tr>
    <td>
        <input type="button" value="1MB data x 3" onclick="download(0, 1);download(0, 1);download(0, 1)" />
        <input type="button" value="1MB data" onclick="download(0, 1)" />
        <input type="button" value="48byte data" onclick="download(1, 1)" />
        <input type="button" value="1byte data" onclick="download(2, 1)" />
    </td>
    <td> -&gt; </td>
    <td>
        <input type="button" value="pack + upload" onclick="upload(1)" />
    </td>
    <td> -&gt; </td>
    <td>
        <input type="button" value="download + unpack" onclick="download(3, 1)" />
    </td>
</tr>
</table>



</body></html>
